<!-- 供应商商品目录 -->
<template>
  <div class="base-info">
    <a-space style="padding: 10px" direction="vertical" fill :size="20">
      <div>
        <a-space>
          <a-button type="primary" @click="AddGoods">新增产品</a-button>
          <a-button status="success">
            <template #icon>
              <icon-download />
            </template>
            导入
          </a-button>
          <a-button status="warning">
            <template #icon> <icon-upload /> </template>导出</a-button
          >
        </a-space>
      </div>
      <TableTurn
        ref="tableRef"
        :tableData="getSuppliercommodity"
        :args="args"
        :isShowPagination="false"
      >
        <a-table-column align="center" :width="80">
          <template #title> 序号 </template>
          <template #cell="{ rowIndex }">
            {{ rowIndex + 1 }}
          </template>
        </a-table-column>
        <a-table-column
          title="产品编号"
          dataIndex="number"
          align="center"
          :width="120"
        >
        </a-table-column>
        <a-table-column
          title="产品名称"
          dataIndex="name"
          align="center"
          :width="120"
        >
        </a-table-column>
        <a-table-column
          title="产品规格"
          :width="120"
          dataIndex="spec"
          align="center"
        >
        </a-table-column>
        <a-table-column
          title="产品指导单价"
          :width="120"
          dataIndex="singlePrice"
          align="center"
        >
        </a-table-column>
        <a-table-column
          title="产品认证情况"
          :width="120"
          dataIndex="authState"
          align="center"
        >
          <template #cell="{ record }">
            <div v-if="record.authState === 2">认证通过</div>
            <div v-if="record.authState === 4">无需认证</div>
          </template>
        </a-table-column>
        <a-table-column
          :width="120"
          title="启用状态"
          dataIndex="primaryContact"
          align="center"
        >
          <template #cell="{ record }">
            {{ record.state === '0' ? '否' : '是' }}
          </template>
        </a-table-column>

        <a-table-column align="center" :width="150" fixed="right" title="操作">
          <template #cell="{ record }">
            <a-button type="text" @click="goEdit(record)">编辑</a-button>
            <a-button type="text" @click="dalete(record.id)">删除</a-button>
          </template>
        </a-table-column>
      </TableTurn>
    </a-space>
  </div>
  <addGoods
    v-model:visible="modalVisible"
    :title="title"
    @addgoods="addgoods"
    :detailInfo="goodsEdit"
  ></addGoods>
</template>

<script lang="ts" setup>
  import { reactive, ref } from 'vue';
  import { useRoute, useRouter } from 'vue-router';
  import {
    GetArchivesDetaliType,
    postSuppliergoods,
    putSuppliergoods,
    delSuppliergoods,
  } from '@/api/buy-management/archives-details/index';
  import addGoods from './components/add-goods/index.vue';

  const route = useRoute();
  const title = ref('新增商品');
  const tableRef = ref();
  const modalVisible = ref(false);
  const getSuppliercommodity = async () => {
    try {
      const res = await GetArchivesDetaliType({
        id: Number(route.query.id),
        typeId: 4,
      });
      return Promise.resolve(res);
    } catch (err: unknown) {
      console.log(err);
    }
  };
  getSuppliercommodity();

  let goodsEdit = ref({
    name: '',
    number: '',
    model: '',
    spec: '',
    singlePrice: null,
    state: null,
    isNeedAuth: null,
    singleUint: '',
    authState: 4,
  });

  const AddGoods = () => {
    title.value = '新增商品';
    goodsEdit.value = {
      name: '',
      number: '',
      model: '',
      spec: '',
      singlePrice: null,
      state: null,
      isNeedAuth: null,
      singleUint: '',
      authState: 4,
    };
    modalVisible.value = true;
  };

  const addgoods = async (form: any, value: any) => {
    if (value === 'add') {
      await postSuppliergoods({
        ...form,
        supplierId: Number(route.query.id),
      });
    } else {
      await putSuppliergoods({ ...form });
    }
    tableRef.value.loadData();
  };

  const goEdit = (val) => {
    title.value = '编辑商品';
    goodsEdit.value = val;
    modalVisible.value = true;
  };

  const dalete = async (id: any) => {
    const res = await delSuppliergoods({ id });
    tableRef.value.loadData();
  };
</script>

<style scoped lang="less">
  .base-info {
    padding: 0 40px;
  }
</style>
